<template>
  <div id="loading">
    <svg viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="25"></circle>
    </svg>
    <p>LOADING...</p>
  </div>
</template>

<script>
import { defineExpose } from "vue";
export default {
  name: "loading",
  props:['check_loading'] ,
  setup(props) {
    const out = () => {
      let conainer = document.getElementById("loading");
      conainer.classList.add("loading_out");
    };
    const In = (next) => {
      let conainer = document.getElementById("loading");
      conainer.classList.remove("loading_out");
      setTimeout(() => {
        next();
        props.check_loading();
      }, 1000);
      
    };

    defineExpose({
      out,
      In
    });
    return {
      out,
      In
    };
  },
};
</script>

<style scoped>
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  flex-direction: column;
  background: rgb(255, 255, 255);
  z-index: 9999999999;
  transition: 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loading p {
  font-weight: 600;
  font-size: 2rem;
  color: #dd351f;
}
#loading svg {
  transition: 0.2s ease;
  width: 5rem;
  margin-bottom: 3rem;
  overflow: visible;
}
#loading svg circle {
  fill: none;
  stroke: #dd351f;
  stroke-width: 12;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transform-origin: center;
  animation: circle_rotate 2s ease-in infinite;
}
@keyframes circle_rotate {
  0% {
    transform: rotate(0deg);
    stroke-dashoffset: 160;
  }
  100% {
    transform: rotate(360deg);
    stroke-dashoffset: -160;
  }
}
.loading_out {
  transform:translateY(100%);
}

.loading_out svg,
.loading_out p {
  opacity: 0;
}
</style>